<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>jquery支持手机触屏滑动切换选项卡切换代码</title>

<style type="text/css">
body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;}

.wrap{margin:100px auto 0 auto;}
.tabs{height:40px;}
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:40px;font-size:16px;text-decoration:none;}
.tabs a.active{color:#fff;background:#333;border-radius:5px 5px 0px 0px;}
.swiper-container{background:#333;height:325px;border-radius:0 0 5px 5px;width:100%;border-top:0;}
.swiper-slide{height:325px;width:100%;background:none;color:#fff;}
.content-slide{padding:40px;}
.content-slide p{text-indent:2em;line-height:1.9;}
</style>

<link rel="stylesheet" href="css/idangerous.swiper.css">

</head>
<body>

<div class="wrap">
    <div class="tabs">
        <a href="#" hidefocus="true" class="active">手机端</a>
        <a href="#" hidefocus="true">选项卡</a>
        <a href="#" hidefocus="true">切换效果</a>
    </div>    
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>脚本之家 - www.jb51.net</h2>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
          </div>
          </div>
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>脚本之家 - www.jb51.net</h2>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
          </div>
          </div>
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>脚本之家 - www.jb51.net</h2>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
            <p>脚本之家不仅为广大网友提供网站代码的学习资源，同时也为大家分享很多实用的经验与教程，以及软件、游戏、驱动等常用软件的下载，脚本之家可以说是一个全能的综合网站了</p>
          </div>
          </div>
      </div>
   </div>
</div>

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script> 
<script type="text/javascript">
var tabsSwiper = new Swiper('.swiper-container',{
	speed:500,
	onSlideChangeStart: function(){
		$(".tabs .active").removeClass('active');
		$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
	}
});

$(".tabs a").on('touchstart mousedown',function(e){
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());
});

$(".tabs a").click(function(e){
	e.preventDefault();
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.jb51.net/" target="_blank">脚本之家</a></p>
</div>
</body>
</html>